/**
 * renderProps模式封装鼠标移动效果：
 * 1. 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态  2. 操作状态的方法） 
   2. 将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部 
   3. 使用 props.render() 的返回值作为要渲染的内容 
 */
import React, { Component } from 'react'

// 导入样式
import './cursor.css'

export default class MouseRenderProps extends Component {
  // JS交互
  // 设置响应数据
  state = {
    x: 0,
    y: 0,
  }

  // 鼠标移动的事件处理函数
  handlerMove = (e) => {
    // console.log(e)
    this.setState({
      x: e.x,
      y: e.y,
    })
  }

  componentDidMount() {
    window.addEventListener('mousemove', this.handlerMove)
  }

  componentWillUnmount() {
    window.removeEventListener('mousemove', this.handlerMove)
  }
  // 模版
  render() {
    return this.props.render(this.state)
  }
}
